<template>
  <div class="box">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    const nameValid = ({ cellValue }) => {
      return new Promise((resolve, reject) => {
        if (cellValue.length < 3 || cellValue.length > 50) {
          reject(new Error('名称长度在 3 到 50 个字符之间'))
        } else {
          resolve()
        }
      })
    }
    const roleValid = ({ cellValue }) => {
      if (
        cellValue &&
        !['前端', '后端', '设计师', '项目经理', '测试'].includes(cellValue)
      ) {
        return Promise.reject(new Error('角色输入不正确'))
      }
    }
    return {
      tableData: [
        {
          id: 1000000,
          name: 'xx0',
          nickname: '钱钱0',
          role: '前端',
          role1: '',
          key: 'home.label.key0',
          language: 'zh_CN',
          content: 'vxe-table 从入门到放弃0',
          checked: false,
          checked1: true,
          checked2: true,
          checked3: true,
          checked4: true,
          checkedList: [],
          flag: true,
          flag1: 'Y',
          flag2: 'N',
          date: '2020-07-09T05:02:30.349Z',
          date1: '2020-07-09T05:02:30.349Z',
          date2: '09:00:00',
          date3: '2020-07-09',
          date4: '2020-07-09T05:02:30.349Z',
          date5: '09:00',
          date6: null,
          date7: '2020-07-09T05:02:30.349Z',
          date8: '2020-07-09T05:02:30.349Z',
          date9: '2020-07-09T05:02:30.349Z',
          date10: '2020-07-09T05:02:30.349Z',
          date11: [],
          date12: '2020-07-09',
          date13: '2020-07-09',
          date14: '2020-05-30',
          num: '0',
          num1: '0',
          num2: '0.0',
          num3: '0.0',
          num4: '0.00',
          num5: '0.00',
          num6: '0',
          num7: '1.39784',
          color: 'rgba(255, 0, 0, 0.8)',
          slider: 40,
          list: [],
          time: 1594271310349,
          sex: '1',
          sex1: ['1'],
          sex2: '1',
          sex3: 1,
          sex4: 1,
          sex5: '1',
          sex6: 1,
          amount: 94667600,
          bankCard: '6200000100000000',
          age: 22,
          age1: '18',
          region: [19, 199, 1773],
          rate: 2,
          rate1: '2',
          state: 'value:Washington',
          address: 'vxe-table 从入门到放弃 - 0',
          address2: 'vxe-table 从入门到放弃0',
          img: 'static/other/img2.gif',
          img1: 'static/other/img2.gif',
          html1:
            '<span style="color:red;">我是一段Html代码</span><br><span style="color:blue;">vxe-table 从入门到放弃0</span><br><span style="color:green;">绿到你发慌！</span>',
          html2:
            '<span style="color:red;">我是一段Html代码</span><span style="color:blue;">vxe-table 从入门到住院0</span><span style="color:green;">绿到你发慌！</span>',
          html3:
            '0 -> <span style="color:red;">我是一段Html代码</span><span style="color:blue;">vxe-table 从入门到放弃0</span><span style="color:green;">绿到你发慌！</span><br><span style="color:green;">绿到你发慌！</span><br><span style="color:green;">我是一段Html代码,我是一段Html代码，我是一段Html代码，绿到你发慌！</span><br><span style="color:red;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style="color:red;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style="color:green;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span>',
          text:
            '0 -> 钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa',
          updateTime: 1594270950349,
          createTime: 1594270950349,
          attr1: '',
          attr2: [],
          attr3: '',
          attr4: '',
          attr5: 0,
          loading: false,
          info: { name2: 'name2_0', more: { sex2: '1', age2: 26 }},
          _XID: 'row_185'
        },
        {
          id: 1000001,
          name: 'vv1',
          nickname: '杨杨1',
          role: '项目经理',
          role1: '1',
          key: 'home.label.key1',
          language: 'en_US',
          content: 'Content1',
          checked: false,
          checked1: false,
          checked2: false,
          checked3: false,
          checked4: false,
          checkedList: [],
          flag: false,
          flag1: 'N',
          flag2: 'Y',
          date: '2020-07-09T07:02:30.349Z',
          date1: '2020-07-09T07:02:30.349Z',
          date2: '09:00:00',
          date3: '',
          date4: '2020-07-09T07:02:30.349Z',
          date5: '09:00',
          date6: null,
          date7: '2020-07-09T07:02:30.349Z',
          date8: '2020-07-09T07:02:30.349Z',
          date9: '2020-07-09T07:02:30.349Z',
          date10: '2020-07-09T07:02:30.349Z',
          date11: [],
          date12: '',
          date13: '',
          date14: '2020-02-18',
          num: '0',
          num1: '0',
          num2: '0.6',
          num3: '0.8',
          num4: '0.35',
          num5: '0.97',
          num6: '0',
          num7: '2.79568',
          color: null,
          slider: 0,
          list: [],
          time: 1594278510349,
          sex: '0',
          sex1: ['0'],
          sex2: '0',
          sex3: 0,
          sex4: 0,
          sex5: '0',
          sex6: 0,
          amount: 76566532,
          bankCard: '6200000100000001',
          age: 30,
          age1: '30',
          region: [1, 1, 5],
          rate: 0,
          rate1: '0',
          state: '',
          address: 'vxe-table 从入门到放弃 - 1',
          address2: 'vxe-table 从入门到放弃1',
          img: 'static/other/img1.gif',
          img1: '',
          html1: '',
          html2: '',
          html3:
            '1 -> <span style="color:red;">我是一段Html代码</span><span style="color:blue;">vxe-table 从入门到放弃1</span><span style="color:green;">绿到你发慌！</span><br><span style="color:green;">绿到你发慌！</span><br><span style="color:green;">我是一段Html代码,我是一段Html代码，我是一段Html代码，绿到你发慌！</span><br><span style="color:red;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style="color:red;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style="color:green;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span>',
          text:
            '1 -> 钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa',
          updateTime: 1594278150349,
          createTime: 1594278150349,
          attr1: '',
          attr2: [],
          attr3: '1',
          attr4: '',
          attr5: 0,
          loading: false,
          info: { name2: 'name2_1', more: { sex2: '0', age2: 30 }},
          _XID: 'row_186'
        },
        {
          id: 1000002,
          name: 'kk2',
          nickname: '嬴嬴2',
          role: '项目经理',
          role1: '',
          key: 'home.label.key1',
          language: 'zh_CN',
          content: 'vxe-table 从入门到放弃2',
          checked: false,
          checked1: true,
          checked2: false,
          checked3: false,
          checked4: false,
          checkedList: [],
          flag: true,
          flag1: 'Y',
          flag2: 'Y',
          date: '2020-07-09T09:02:30.349Z',
          date1: '2020-07-09T09:02:30.349Z',
          date2: '09:00:00',
          date3: '',
          date4: '2020-07-09T09:02:30.349Z',
          date5: '09:00',
          date6: null,
          date7: '2020-07-09T09:02:30.349Z',
          date8: '2020-07-09T09:02:30.349Z',
          date9: '2020-07-09T09:02:30.349Z',
          date10: '2020-07-09T09:02:30.349Z',
          date11: [],
          date12: '',
          date13: '',
          date14: '2020-12-04',
          num: '0',
          num1: '0',
          num2: '1.1',
          num3: '1.6',
          num4: '0.70',
          num5: '1.93',
          num6: '0',
          num7: '4.19352',
          color: null,
          slider: 0,
          list: [],
          time: 1594285710349,
          sex: '0',
          sex1: ['0'],
          sex2: '0',
          sex3: 0,
          sex4: 0,
          sex5: '0',
          sex6: 0,
          amount: 76566620,
          bankCard: '6200000100000002',
          age: 30,
          age1: '30',
          region: [1, 1, 5],
          rate: 0,
          rate1: '0',
          state: '',
          address: 'vxe-table 从入门到放弃 - 2',
          address2: 'vxe-table 从入门到放弃2',
          img: 'static/other/img1.gif',
          img1: '',
          html1: '',
          html2: '',
          html3:
            '2 -> <span style="color:red;">我是一段Html代码</span><span style="color:blue;">vxe-table 从入门到放弃2</span><span style="color:green;">绿到你发慌！</span><br><span style="color:green;">绿到你发慌！</span><br><span style="color:green;">我是一段Html代码,我是一段Html代码，我是一段Html代码，绿到你发慌！</span><br><span style="color:red;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style="color:red;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style="color:green;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span>',
          text:
            '2 -> 钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa',
          updateTime: 1594285350349,
          createTime: 1594285350349,
          attr1: '',
          attr2: [],
          attr3: '',
          attr4: '',
          attr5: 0,
          loading: false,
          info: { name2: 'name2_2', more: { sex2: '0', age2: 26 }},
          _XID: 'row_187'
        },
        {
          id: 1000003,
          name: 'rr3',
          nickname: '蔡蔡3',
          role: '测试',
          role1: '',
          key: 'home.label.key3',
          language: 'en_US',
          content: 'Content3',
          checked: false,
          checked1: false,
          checked2: true,
          checked3: false,
          checked4: false,
          checkedList: [],
          flag: false,
          flag1: 'N',
          flag2: 'N',
          date: '2020-07-09T11:02:30.349Z',
          date1: '2020-07-09T11:02:30.349Z',
          date2: '09:00:00',
          date3: '2020-07-09',
          date4: '2020-07-09T11:02:30.349Z',
          date5: '09:00',
          date6: null,
          date7: '2020-07-09T11:02:30.349Z',
          date8: '2020-07-09T11:02:30.349Z',
          date9: '2020-07-09T11:02:30.349Z',
          date10: '2020-07-09T11:02:30.349Z',
          date11: [],
          date12: '2020-07-09',
          date13: '',
          date14: '2020-11-30',
          num: '1',
          num1: '1',
          num2: '1.7',
          num3: '2.4',
          num4: '1.04',
          num5: '2.90',
          num6: '1',
          num7: '5.59136',
          color: 'rgba(0, 255, 0, 0.8)',
          slider: 60,
          list: [],
          time: 1594292910349,
          sex: '1',
          sex1: ['0', '1'],
          sex2: '0',
          sex3: 1,
          sex4: 0,
          sex5: '0',
          sex6: 0,
          amount: 76566708,
          bankCard: '6200000100000003',
          age: 28,
          age1: '28',
          region: [9, 73, 719],
          rate: 3,
          rate1: '3',
          state: 'value:Delaware',
          address: 'vxe-table 从入门到放弃 - 3',
          address2: 'vxe-table 从入门到放弃3',
          img: 'static/other/img2.gif',
          img1: '',
          html1:
            '<span style="color:red;">我是一段Html代码</span><br><span style="color:blue;">vxe-table 从入门到放弃3</span><br><span style="color:green;">绿到你发慌！</span>',
          html2:
            '<span style="color:red;">我是一段Html代码</span><span style="color:blue;">vxe-table 从入门到住院3</span><span style="color:green;">绿到你发慌！</span>',
          html3:
            '3 -> <span style="color:red;">我是一段Html代码</span><span style="color:blue;">vxe-table 从入门到放弃3</span><span style="color:green;">绿到你发慌！</span><br><span style="color:green;">绿到你发慌！</span><br><span style="color:green;">我是一段Html代码,我是一段Html代码，我是一段Html代码，绿到你发慌！</span><br><span style="color:red;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style="color:red;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style="color:green;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span>',
          text:
            '3 -> 钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa',
          updateTime: 1594292550349,
          createTime: 1594292550349,
          attr1: '',
          attr2: [],
          attr3: '1',
          attr4: '',
          attr5: 0,
          loading: false,
          info: { name2: 'name2_3', more: { sex2: '1', age2: 30 }},
          _XID: 'row_188'
        },
        {
          id: 1000004,
          name: 'dd4',
          nickname: '徐徐4',
          role: '设计师',
          role1: '',
          key: 'home.label.key3',
          language: 'zh_CN',
          content: 'vxe-table 从入门到放弃4',
          checked: false,
          checked1: true,
          checked2: false,
          checked3: true,
          checked4: false,
          checkedList: [],
          flag: true,
          flag1: 'Y',
          flag2: 'Y',
          date: '2020-07-09T13:02:30.349Z',
          date1: '2020-07-09T13:02:30.349Z',
          date2: '09:00:00',
          date3: '',
          date4: '2020-07-09T13:02:30.349Z',
          date5: '09:00',
          date6: null,
          date7: '2020-07-09T13:02:30.349Z',
          date8: '2020-07-09T13:02:30.349Z',
          date9: '2020-07-09T13:02:30.349Z',
          date10: '2020-07-09T13:02:30.349Z',
          date11: [],
          date12: '',
          date13: '2020-07-09',
          date14: '2020-12-04',
          num: '1',
          num1: '1',
          num2: '2.3',
          num3: '3.2',
          num4: '1.39',
          num5: '3.87',
          num6: '1',
          num7: '6.98920',
          color: 'rgba(255, 0, 0, 0.8)',
          slider: 20,
          list: [],
          time: 1594300110349,
          sex: '0',
          sex1: ['0'],
          sex2: '1',
          sex3: 0,
          sex4: 1,
          sex5: '0',
          sex6: 0,
          amount: 76566796,
          bankCard: '6200000100000004',
          age: 26,
          age1: '26',
          region: [19, 199, 1773],
          rate: 2,
          rate1: '2',
          state: 'value:Washington',
          address: 'vxe-table 从入门到放弃 - 4',
          address2: 'vxe-table 从入门到放弃4',
          img: 'static/other/img1.gif',
          img1: 'static/other/img1.gif',
          html1: '',
          html2: '',
          html3:
            '4 -> <span style="color:red;">我是一段Html代码</span><span style="color:blue;">vxe-table 从入门到放弃4</span><span style="color:green;">绿到你发慌！</span><br><span style="color:green;">绿到你发慌！</span><br><span style="color:green;">我是一段Html代码,我是一段Html代码，我是一段Html代码，绿到你发慌！</span><br><span style="color:red;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style="color:red;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style="color:green;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span>',
          text:
            '4 -> 钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa',
          updateTime: 1594299750349,
          createTime: 1594299750349,
          attr1: '',
          attr2: [],
          attr3: '',
          attr4: '',
          attr5: 0,
          loading: false,
          info: { name2: 'name2_4', more: { sex2: '0', age2: 26 }},
          _XID: 'row_189'
        },
        {
          id: 1000005,
          name: 'px5',
          nickname: '雷钱5',
          role: '前端',
          role1: '',
          key: 'home.label.key5',
          language: 'en_US',
          content: 'Content5',
          checked: false,
          checked1: false,
          checked2: false,
          checked3: false,
          checked4: true,
          checkedList: [],
          flag: false,
          flag1: 'N',
          flag2: 'Y',
          date: '2020-07-09T15:02:30.349Z',
          date1: '2020-07-09T15:02:30.349Z',
          date2: '09:00:00',
          date3: '',
          date4: '2020-07-09T15:02:30.349Z',
          date5: '09:00',
          date6: null,
          date7: '2020-07-09T15:02:30.349Z',
          date8: '2020-07-09T15:02:30.349Z',
          date9: '2020-07-09T15:02:30.349Z',
          date10: '2020-07-09T15:02:30.349Z',
          date11: [],
          date12: '',
          date13: '',
          date14: '2020-12-22',
          num: '1',
          num1: '1',
          num2: '2.8',
          num3: '3.9',
          num4: '1.74',
          num5: '4.83',
          num6: '1',
          num7: '8.38704',
          color: null,
          slider: 40,
          list: [],
          time: 1594307310349,
          sex: '0',
          sex1: ['0'],
          sex2: '0',
          sex3: 0,
          sex4: 0,
          sex5: '1',
          sex6: 1,
          amount: 76566884,
          bankCard: '6200000100000005',
          age: 18,
          age1: '30',
          region: [1, 1, 5],
          rate: 0,
          rate1: '0',
          state: '',
          address: 'vxe-table 从入门到放弃 - 5',
          address2: 'vxe-table 从入门到放弃5',
          img: 'static/other/img1.gif',
          img1: '',
          html1: '',
          html2: '',
          html3:
            '5 -> <span style="color:red;">我是一段Html代码</span><span style="color:blue;">vxe-table 从入门到放弃5</span><span style="color:green;">绿到你发慌！</span><br><span style="color:green;">绿到你发慌！</span><br><span style="color:green;">我是一段Html代码,我是一段Html代码，我是一段Html代码，绿到你发慌！</span><br><span style="color:red;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style="color:red;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span><br><span style="color:green;">我是一段Html代码,我是一段Html代码，我是一段Html代码</span>',
          text:
            '5 -> 钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa钱杨嬴蔡徐雷老蒋杜项徐赵胡李叼孙马吕xvkrdpbfUGTcesHzNa',
          updateTime: 1594306950349,
          createTime: 1594306950349,
          attr1: '',
          attr2: [],
          attr3: '1',
          attr4: '',
          attr5: 0,
          loading: false,
          info: { name2: 'name2_5', more: { sex2: '0', age2: 30 }},
          _XID: 'row_190'
        }
      ],
      sexList: [],
      validRules: {
        name: [
          { required: true, message: '名称必须填写' },
          { validator: nameValid }
        ],
        role: [{ validator: roleValid }],
        sex: [
          { required: true, message: '性别必须填写' },
          { pattern: /^[0,1]{1}$/, message: '格式不正确' }
        ],
        age: [{ pattern: '^[0-9]{0,3}$', message: '格式不正确' }]
      }
    }
  },
  created() {
    // this.tableData = window.MOCK_DATA_LIST.slice(0, 6)
  },
  methods: {
    async validEvent() {
      const errMap = await this.$refs.xTable.validate().catch(errMap => errMap)
      if (errMap) {
        this.$XModal.message({ status: 'error', message: '校验不通过！' })
      } else {
        this.$XModal.message({ status: 'success', message: '校验成功！' })
      }
    },
    async fullValidEvent() {
      const errMap = await this.$refs.xTable
        .fullValidate()
        .catch(errMap => errMap)
      if (errMap) {
        const msgList = []
        Object.values(errMap).forEach(errList => {
          errList.forEach(params => {
            const { rowIndex, column, rules } = params
            rules.forEach(rule => {
              msgList.push(
                `第 ${rowIndex} 行 ${column.title} 校验错误：${rule.message}`
              )
            })
          })
        })
        this.$XModal.message({
          status: 'error',
          message: () => {
            return [
              <div class="red" style="max-height: 400px;overflow: auto;">
                {msgList.map(msg => (
                  <div>{msg}</div>
                ))}
              </div>
            ]
          }
        })
      } else {
        this.$XModal.message({ status: 'success', message: '校验成功！' })
      }
    },
    async selectValidEvent() {
      const selectRecords = this.$refs.xTable.getCheckboxRecords()
      if (selectRecords.length > 0) {
        const errMap = await this.$refs.xTable
          .validate(selectRecords)
          .catch(errMap => errMap)
        if (errMap) {
          this.$XModal.message({ status: 'error', message: '校验不通过！' })
        } else {
          this.$XModal.message({ status: 'success', message: '校验成功！' })
        }
      } else {
        this.$XModal.message({ status: 'warning', message: '未选中数据！' })
      }
    },
    async insertEvent(row) {
      // const { row: newRow } = await this.$refs.xTable.insert()
      // // 插入一条数据并触发校验
      // const errMap = await this.$refs.xTable
      //   .validate(newRow)
      //   .catch(errMap => errMap)
      // if (errMap) {
      //   // console.log(errMap)
      // }
      const xTable = this.$refs.xTable
      const record = {}
      xTable.insertAt(record, row).then(({ row }) => {
        xTable.setActiveRow(row)
      })
    },
    getSelectEvent() {
      const selectRecords = this.$refs.xTable.getCheckboxRecords()
      this.$XModal.alert(selectRecords.length)
    },
    getInsertEvent() {
      const insertRecords = this.$refs.xTable.getInsertRecords()
      this.$XModal.alert(insertRecords.length)
    },
    getRemoveEvent() {
      const removeRecords = this.$refs.xTable.getRemoveRecords()
      this.$XModal.alert(removeRecords.length)
    },
    getUpdateEvent() {
      const updateRecords = this.$refs.xTable.getUpdateRecords()
      this.$XModal.alert(updateRecords.length)
    }
  }
}
</script>

<style lang="scss">
::v-deep .vxe-header--column {
  display: none !important;
}
</style>